{extend name="layout/layout" /}


{block name="style"}
	<style>
		.info{
			padding: 10px;
			background: #fff;
			margin-bottom: 8px;
		}
	</style>
{/block}

{block name="main"}
	<div class="shipping" v-cloak>
		<div class="info">
			<p>快递公司：{{name}}</p>
			<p>快递单号：{{no}}</p>
		</div>

		<div class="detail">
			<ul class="mui-table-view">
			    <li class="mui-table-view-cell" v-for="item in list">
			    	<p>{{item.AcceptTime}}</p>	
			    	<p>{{item.AcceptStation}}</p>	
			    </li>
			</ul>
		</div>
	</div>
{/block}

{block name="navbar"}{/block}

{block name="script"}
	<script>
		var detailVue = new Vue({
			el: '.shipping',
			data: {
				code : "{$data.code?:''}",
				name : "{$data.name?:''}",
				no : "{$data.no?:''}",
				list: [],
				tips:'',
			},
			mounted: function(){
				this.getShipping();
			},
			methods:{
				getShipping: function(){
					layer.open({
						type:2,
						shadeClose: false
					});

					var that = this;
					var url =  'shipping/info';
					request(that, {'url': url, 'data': {
					  	"code": that.code,
					  	"no": that.no,
					}}, function(res){
						layer.closeAll();
						if(res.code == 200) {
							that.list = res.data.traces;
							that.tips = res.data.tips;
						} else {
							mui.toast(res.msg);
						}	
					});
				}

				
			}

		});
	</script>
{/block}